<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>博客详情</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/css/user.css}" rel="stylesheet">


</head>
<body>
<div class="container" style="background:white">
    <div th:replace="~{commons/common::header}"></div>
    <div th:replace="~{commons/common::topbar}"></div>
    <div class="row">
        <div class="col-md-9 col-sm-12">
            <!--明细-->
            <div class="row">
                <div class="col-md-3 text-center">
                    <input name="blogId" id="blogId" type="hidden" th:value="${blog.id}">
                    <input name="bloggerId" id="bloggerId" type="hidden" th:value="${blogger.id}">
                    <img th:src="@{/{src}(src=(${blog.image}==''?'imgs/7.jpg':'upload/'+${blog.image}))}"
                         style="min-width:100px;min-height:150px" class="img-responsive img-thumbnail"
                         alt="Responsive image"/>
                    <div style="margin-top: 15px">
                        <button type="button" class="btn btn-sm btn-default" name="like-btn" id="likeButton"
                                style="background-color: grey; margin-right: 15px"><span
                                class="glyphicon glyphicon-thumbs-up"></span>&nbsp;点赞
                        </button>
                        <button type="button" class="btn btn-sm btn-default" name="collect-btn" id="collectButton"
                                style="background-color: grey"><span class="glyphicon glyphicon-star-empty"></span>&nbsp;收藏
                        </button>
                    </div>
                </div>
                <div class="col-md-9">
                    <!--微博详细-->
                    <div class="panel panel-default">
                        <div class="panel-heading" th:text="${blog.title}"></div>&nbsp;<span class="badge"
                                                                                             th:text="${blog.blogLabel}"></span>
                        <div class="panel-body" style="min-height:200px" th:text="${blog.content}"></div>
                        <div class="panel-footer" th:text="${blog.postScript}"></div>
                    </div>
                    <!--END微博详细-->
                </div>
            </div>
            <hr/>
            <!--END明细-->
            <!--评论-->
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            评论区
                        </div>
                        <div class="panel-body">
                            <!--评论列表-->
                            <ul class="list-group">
                                <li class="list-group-item" th:each="comment:${comList}"
                                    th:text="${comment.userId}+':'+${comment.content}"></li>
                            </ul>
                            <!--END评论列表-->
                            <!--发表评论-->
                            <form method="post"
                                  th:action="@{/comment/insert/{blogId}(blogId = ${blog.id})}">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="comment">我要评论</label>
                                    <div class="col-sm-10">
                                        <textarea id="comment" name="comment" class="form-control" rows="3"
                                                  style="resize: none"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-1 col-sm-11" style="margin-top: 12px">
                                        <button type="submit" class="btn btn-primary">提交
                                        </button>
                                        <button type="button" id="detailBackButton" class="btn btn-default"
                                                style="float: right">
                                            返回
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!--END发表评论-->
                        </div>
                    </div>
                </div>
            </div>
            <!--END评论-->
        </div>
        <div class="col-md-3 col-sm-12">
            <div class="user-box">
                <div class="user-innerbox">
                    <div class="row">
                        <div class="col-md-5 col-sm-4">
                            <h4 th:text="${blogger.userNickname}" style="text-align: center"></h4>
                            <button type="button" class="btn btn-sm btn-primary" name="viewUser-btn" id="viewUserButton"
                                    style="margin: 5px">
                                <span class="glyphicon glyphicon-eye-open"></span>&nbsp;查看 ta
                            </button>
                            <button type="button" class="btn btn-sm btn-success" name="attention-btn"
                                    id="attentionButton" style="margin: 5px">
                                <span class="glyphicon glyphicon-heart-empty"></span>&nbsp;关注 ta
                            </button>
                        </div>
                        <div class="col-md-5 col-sm-5">
                            <a><img th:src="@{/{src}(src=(${blogger.userImage}==''?'imgs/default.jpg':'upload/'+${blogger.userImage}))}"
                                    class="profile-photo img-circle" alt="Responsive image" id="bloggerImage"/></a>

                        </div>
                    </div>
                </div>
            </div>
            <div th:replace="~{commons/common::hotrange}"></div>
        </div>
    </div>
    <div th:replace="~{commons/common::footer}"></div>

</div>
</body>
<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/button.js}"></script>
<script th:src="@{/js/blog/detailBlog.js}"></script>
</html>







